import { graphql } from 'gatsby';

import ComponentApi from '../../components/ComponentApi';
import ReactPlayground from '../../components/ReactPlayground';
import Figure from '../../examples/Figure';

# Figures

Anytime you need to display a piece of content, like an image with an
optional caption, consider using a `Figure`.

## Figure

Displaying related images and text with the Figure component.

<ReactPlayground codeText={Figure} />

## API

<ComponentApi metadata={props.data.figure} />
<ComponentApi metadata={props.data.image} />
<ComponentApi metadata={props.data.caption} />

export const query = graphql`
  query FigureQuery {
    figure: componentMetadata(displayName: { eq: "Figure" }) {
      displayName
      ...ComponentApi_metadata
    }
    image: componentMetadata(displayName: { eq: "FigureImage" }) {
      displayName
      ...ComponentApi_metadata
    }
    caption: componentMetadata(displayName: { eq: "FigureCaption" }) {
      displayName
      ...ComponentApi_metadata
    }
  }
`;
